<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width,  user-scalable=no"/>
  <script src="node_modules/vconsole/dist/vconsole.min.js"></script>
  <link rel="stylesheet" href="css/index.css">
  <style>
    #main {
      padding: 4% 0 0 0;
    }

    .inputs {
      width: 100%;
    }

    img {
      width: 30%;
      height: 100px;
      margin: 5px;
    }

    .picture {
      /*margin-left: 180px;*/
      text-align: center;
    }

    .submit {
      margin-top: 5%;
    }

    .el-form-item__label {
      font-size: 24px;
    }

  </style>


</head>
<body>

<div id="main">
  <el-form label-width="180px" class="demo-ruleForm" :model="repairsForm" ref="repairsForm">
    <el-form-item
      label="报修人姓名:"
      prop="name"
      :rules="[
      { required: true, message: '姓名不能为空'},
      ]
    "
    >
      <el-input clearable type="name" v-model="repairsForm.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item
      label="联系方式:"
      prop="phone"
      :rules="[
      { required: true, message: '联系方式不能为空'},

    ]"
    >
      <el-input clearable type="phone" v-model="repairsForm.phone" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item
      label="所属部门:"
      prop="section"
      :rules="[
      { required: true, message: '部门不能为空'},
    ]"
    >
      <el-input clearable type="section" v-model="repairsForm.section" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item
      label="所属厂区:"
      prop="factory"
      :rules="[
      { required: true, message: '请选择厂区'},
    ]"
    >
      <el-select class="inputs" v-model="repairsForm.factory" placeholder="请选择">
        <el-option
          v-for="item in pollingS"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      label="是否巡检范围:"
      prop="polling"
      :rules="[
      { required: true, message: '请选择是否是巡检范围'},
    ]"
    >
      <el-select class="inputs" v-model="repairsForm.polling" placeholder="请选择">
        <el-option
          v-for="item in pollingS"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      label="维修单类型:"
      prop="type"
      :rules="[
      { required: true, message: '请输入维修单类型'},
    ]"
    >
      <el-select class="inputs" v-model="repairsForm.type" placeholder="请选择">
        <el-option
          v-for="item in pollingS"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      label="报修内容:"
      prop="content"
      :rules="[
      { required: true, message: '请输入报修内容'},
    ]"
    >
      <el-input clearable type="content" v-model="repairsForm.content" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item
      label="报修地址:"
      prop="address"
      :rules="[
      { required: true, message: '请输入报修地址'},
    ]"
    >
      <el-input clearable type="address" v-model="repairsForm.address" autocomplete="off"></el-input>
    </el-form-item>
    <el-upload
      multiple
      class="picture"
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="uploadSuccess"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog class="picture" :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-form-item class="submit">
      <el-button type="primary" @click="submit('repairsForm')">提交</el-button>
    </el-form-item>
  </el-form>

</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://www.joywok.com/dist/scripts/jssdk.js"></script>
<script src="https://www.joywok.com/public/scripts/jssdk.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script src="js/index.js"></script>
<script>
  var vConsole = new VConsole();

  axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';

  new Vue( {
    el: "#main",
    data() {
      var validatePhone = ( rule, value, callback ) => {
        if ( value === '' ) {
          callback( new Error( '请输入密码' ) );
        } else {
          if ( this.ruleForm.checkPass !== '' ) {
            this.$refs.ruleForm.validateField( 'checkPass' );
          }
          callback();
        }
      };
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        repairsForm: {
          name: "",
          phone: "",
          section: "",
          factory: "",
          polling: "",
          type: "",
          content: "",
          address: "",
        },
        factoryS: [],
        typeS: [],
        pollingS: [
          {
            value: 'yes',
            label: '是'
          },
          {
            value: 'no',
            label: '否'
          },
        ],
        img: [],
      }

    },
    methods: {
      handleRemove( file, fileList ) {
        console.log( file, fileList );
      },
      uploadSuccess( response, file ) {
        console.log( file )
        this.img.push( file.response.id )
      },
      handlePictureCardPreview( file ) {
        console.log( file )
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      submit( repairsForm ) {
        this.$refs[ repairsForm ].validate( ( valid ) => {
          if ( valid ) {
            alert( '已成功提交!' );
          } else {
            console.log( '提交失败，请重试!!' );
            return false;
          }
        } );
        let _this = this;
        axios( {
          method: "POST",
          url: '',
          data: {
            ..._this.repairsForm,
            img: _this.img
          }
        } ).then( function ( response ) {
          console.log( response );
        } )
           .catch( function ( error ) {
             console.log( error );
           } );
      },

    },
    created() {
      console.log("1、获取 配置信息")
      axios( {
        url: 'https://test17.maxuscloud.cn/sso/login/loginSign',
        params: {
          'url': 'https://oam.saicmaxus.com',
          'appCode': 'dataCenter',
        }
      } ).then( ( { data = {} } ) => {
        console.log( "返回配置信息: ", data );
        if ( data.code === 200 ) {
          console.log("2、注册JSSDK")
          console.log("1"+data.appId)
          console.log("1"+data.timeStamp)
          console.log("1"+data.nonceStr)
          console.log("1"+data.sign)
          console.log("1"+data.corpId)
          jw.config( {
            debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出， //仅在 pc 端时才会打印。
            appid: data.appId,// 必填，公众号的唯一标识
            timestamp: data.timeStamp,// 必填，生成签名的时间戳（10 位）
            nonceStr: data.nonceStr,// 必填，生成签名的随机串
            signature: data.sign,// 必填，签名，见附录
            app_access_token: '', // 免登录后获取的 token，应用于上传文件，下载文 //件等功能
            corpid: data.corpId  // 企业 ID

          } );

          jw.ready = function () {
            alert( "3、获取免登码" )
            jw.getAuthCode( {
              url: 'https://test17.maxuscloud.cn',
            }, {
              success: function ( data ) {
                // 获取后执行的地方，返回一个 Code。
                alert( "免登码：" + data.code )
                console.log( "4、提交免登码到后台换取用户信息或Token" )
              },
              failure: function ( err ) {
                console.log( '获取免登码失败', err );
              }
            } );

            // 前端获取用户信息
            jw.getInfo( {
              success: function ( res ) {
                // 以键值对的形式返回
                // 如：{"info":{"id":"","name":"","title":"", … }} }
                var sInfo = "工号: " + res.info.employee_id
                  + "\n姓名:" + res.info.name
                  + "\n手机号:" + res.info.other_account;

                alert( sInfo )

                console.log( "工号", res.info.employee_id )
                console.log( "姓名", res.info.name )
                console.log( "手机号", res.info.other_account )
              }
            } )
          }
        }
      } ).catch( function ( error ) {
        console.log( error );
      } );


      // let result = this.$refs.result;
      // let input = this.$refs.input;
      // if ( typeof FileReader === 'undefined' ) {
      //   result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
      //   input.setAttribute( 'disabled', 'disabled' );
      //
      // } else {
      //   input.addEventListener( 'change', this.readFile, false );
      // }
    }
  } )

</script>
</body>
</html>
